<style lang="less">
  .ivu-poptip-rel{
    width: 100%;
  }
  .tem-card .ivu-form-item{
    margin-bottom: 24px;
  }
  .ivu-input-number{
    width: 100%;
  }
  .tem-card .ivu-form-item .ivu-select-selection{
    width: 100%;
  }
</style>
<template>
  <div class="tem-div tem-frm">
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" @click="cancel" style="margin-left: 8px">取消</Button>
    </Card>
    <Card class="tem-card">
      <Collapse  v-model="panelValue1">
        <Panel name="1">
            基本信息
            <div slot="content">
              <Form ref="form" :model="formData" :rules="ruleValidate" label-position="right" :label-width="100">
                <Row  type="flex" justify="space-around">
                    <Col span="11">
                      <FormItem label="司机姓名" prop="name">
                          <i-input ref='name' placeholder="司机姓名" v-model="formData.name"></i-input>
                      </FormItem>
                      <FormItem label="所属机构" prop="orgName">
                           <Poptip placement="bottom" v-model="showPoptip" style="width: 100%;">
                            <i-input ref="pId" v-model="formData.orgName" @on-focus="handlerFocus" placeholder="请选择所属机构"></i-input>
                            <div class="api" ref="tree" slot="content" style="text-align: left;">
                              <Tree :data="orgTree" @on-select-change="handleSelectTree"></Tree>
                            </div>
                          </Poptip>
                      </FormItem>
                    <FormItem label="身份证号" prop="identityCard">
                      <i-input placeholder="身份证号" v-model="formData.identityCard" :maxlength="18"></i-input>
                    </FormItem>
                      <FormItem label="手机号" prop="phone">
                          <i-input placeholder="手机号" v-model="formData.phone" :maxlength="11"></i-input>
                      </FormItem>
                      <FormItem label="司机编号">
                          <i-input placeholder="司机编号" v-model="formData.jobNumber" :maxlength="18"></i-input>
                      </FormItem>
                      <FormItem label="籍贯">
                          <i-input placeholder="籍贯" v-model="formData.nativePlace"></i-input>
                      </FormItem>
                      <FormItem label="家庭联系电话">
                          <i-input placeholder="家庭联系电话" v-model="formData.homeTelephone"></i-input>
                      </FormItem>
                    </Col>
                    <Col span="11">
                      <FormItem label="年龄">
                          <InputNumber placeholder="年龄" v-model="formData.age" :max="999"></InputNumber>
                      </FormItem>
                      <FormItem label="员工状态">
                          <i-select placeholder="员工状态" v-model="formData.employeesState">
                            <i-option v-for="item in employeesStateArray"  :value="item.value" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="入职日期">
                          <DatePicker type="date" placeholder="入职日期" v-model="formData.entryDate"></DatePicker>
                      </FormItem>
                      <FormItem label="离职日期">
                          <DatePicker type="date" placeholder="离职日期" v-model="formData.dimissionTime"></DatePicker>
                      </FormItem>
                      <FormItem label="学历">
                          <i-select placeholder="学历" v-model="formData.education" transfer>
                            <i-option v-for="item in educationArray"  :value="item.value" :key="item.value">{{item.label}}</i-option>
                          </i-select>
                      </FormItem>
                      <FormItem label="户口所在地">
                          <i-input placeholder="户口所在地" v-model="formData.placeOfDomicile"></i-input>
                      </FormItem>
                      <FormItem label="当前居住地">
                          <i-input placeholder="当前居住地" v-model="formData.currentResidence"></i-input>
                      </FormItem>
                    </Col>
                </Row>
              </Form>
            </div>
        </Panel>
      </Collapse>
    </Card>
    <Card class="tem-card" style="text-align:right">
          <Button type="primary" :loading="actionLoading" @click="addOrUp('form')">保存</Button>
          <Button type="ghost" @click="cancel" style="margin-left: 8px">取消</Button>
    </Card>
  </div>
</template>
<script>
  import fetch from './service';
  import orgService from '@/page/main/userManage/org/service';

  export default {
    components: {
    },
    data () {
      return {
        panelValue1: '1',
        // 查询条件
        searchObj: {
        },
        showPoptip: false,
        // 员工在职状态
        employeesStateArray: [
          {
            value: 0,
            label: '在职'
          },
          {
            value: 1,
            label: '离职'
          }
        ],
        // 学历
        educationArray: [
          {
            value: '1',
            label: '小学'
          },
          {
            value: '2',
            label: '初中'
          },
          {
            value: '3',
            label: '高中'
          },
          {
            value: '4',
            label: '中专'
          },
          {
            value: '5',
            label: '大专'
          },
          {
            value: '6',
            label: '本科'
          }
        ],
        formData: {},
        ruleValidate: {
          name: [
            {required: true, message: '司机姓名', trigger: 'blur'},
            {max: 10, message: '司机姓名不能超过10个字符且不包含空格', trigger: 'blur'}
          ],
          orgName: [
            {required: true, message: '所属机构不能为空', trigger: 'blur'}
          ],
          identityCard: [
            {required: true, message: '身份证号不能为空', trigger: 'blur'},
            {pattern: '(^\\d{15}$)|(^\\d{18}$)|(^\\d{17}(\\d|X|x)$)', message: '身份证号格式不正确', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '手机号不能为空', trigger: 'blur'},
            {pattern: '^(13[0-9]|14[0-9]|15[0-9]|17[0-9]|18[0-9])\\d{8}$', message: '手机号格式不正确', trigger: 'blur'}
          ]
        },
        orgTree: []
      };
    },
    created () {
      // 初始化司机信息
      this.init();
      // 初始化机构树
      this.getOrgTree();
    },
    computed: {
      actionLoading () {
        return this.$store.state.app.actionLoading;
      }
    },
    methods: {
      init () {
        this.formData.id = this.$route.query.id;
        this.formData.age = '';
        if (this.formData.id !== undefined && this.formData.id !== '') {
            this.getById(this.formData.id);
        }
        console.log(this.formData);
      },
      getById (carId) {
        fetch.getOne({id: carId}).then((result) => {
          this.formData = result.data;
          console.log('gpsOptions', this.formData);
        });
      },
      getOrgTree () {
        // 获取机构树
        let opt = {id: 1};
        orgService.getTree(opt).then((result) => {
          // 展开父级节点
          this.$set(result.data, 'expand', true);
          this.orgTree = [result.data];
        });
      },
      addOrUp (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            console.log('提交formData', this.formData);
            if (this.formData.entryDate && this.formData.dimissionTime && (this.formData.entryDate > this.formData.dimissionTime)) {
              this.$Notice.error({
                title: '离职日期不能小于入职日期'
              });
              return;
            }
            this._hyTool.cal(true);
            try {
              if (this.formData.id !== undefined && this.formData.id !== '') {
                let opt = {id: this.formData.id};
                fetch.updateApi(opt, this.formData).then((data) => {
                  this.$Notice.success({
                    title: '修改成功'
                  });
                  this.$router.push('/position/driver');
                });
              } else {
                fetch.saveApi(this.formData).then((data) => {
                  this.$Notice.success({
                    title: '新增成功'
                  });
                  this.$router.push('/position/driver');
                });
              }
              this._hyTool.cal(false);
            } catch (e) {}
          }
        });
      },
      // 取消
      cancel () {
        this.$Modal.confirm({
          title: '提示',
          content: '是否取消编辑司机信息',
          onOk: () => {
            this.$router.push('/position/driver');
          }
        });
      },
      handlerFocus () {
        // 获取父级节点文本框宽度
        let inputWidth = this.$refs.pId.$el.offsetWidth;
        // 设置树div宽度
        this.$refs.tree.style.width = inputWidth - 32 + 'px';
      },
      handleSelectTree (node) {
        this.formData.orgName = node[0].title;
        this.formData.orgId = node[0].id;
        this.$refs.form.validateField('orgName');
        this.showPoptip = false;
      }
    }
  };
</script>
